import { make } from "../../utils/dom"
import styles from "./index.module.less"
class FontSizeTool {
	static get isInline() {
		return true
	}

	constructor({ api }) {
		this.api = api
		this.button = null
		this.state = false
		this.tag = "P"
	}

	render() {
		this.button = make("button", styles["font-size"], { type: "button" })
		this.button.innerHTML = this.toolboxIcon
		this.button.classList.add(this.api.styles.inlineToolButton)

		return this.button
	}

	surround(range) {
		if (this.state) {
			this.unwrap(range)
		} else {
			this.wrap(range)
		}
	}

	wrap(range) {
		const selectedText = range.extractContents()
		const mark = document.createElement(this.tag)
		mark.classList.add(FontSizeTool.CSS)
		mark.appendChild(selectedText)
		range.insertNode(mark)

		this.api.selection.expandToTag(mark)
	}

	unwrap(range) {
		const mark = this.api.selection.findParentTag(this.tag, FontSizeTool.CSS)
		if (mark) {
			const text = range.extractContents()
			mark.remove()
			range.insertNode(text)
		}
	}

	checkState() {
		const mark = this.api.selection.findParentTag(this.tag, FontSizeTool.CSS)
		this.state = !!mark

		if (this.state) {
			this.showActions(mark)
		} else {
			this.hideActions()
		}
	}

	renderActions() {
		this.box = make("div", styles["font-wrap"])
		const mark = this.api.selection.findParentTag(this.tag, FontSizeTool.CSS)
		if (mark) {
			const currentSize = mark.style.fontSize || window.getComputedStyle(mark).fontSize
			this.fontSizeSelect = make("input", styles["font-size-select"], { type: "range", min: "10", step: "1", defaultValue: parseInt(currentSize) })
			this.fontInput = make("input", styles["font-size-input"], { type: "number", min: "10", max: "100", defaultValue: parseInt(currentSize) })
			this.fontSizeSelect.addEventListener("change", (e) => {
				const newSize = e.target.value
				updateContent(newSize)
				this.fontInput.value = newSize
			})

			this.fontInput.addEventListener("change", (e) => {
				const newSize = e.target.value
				updateContent(newSize)
				this.fontSizeSelect.value = newSize
			})

			function updateContent(value) {
				mark.style.fontSize = value + "px"
				mark.style.lineHeight = "1.2em"
			}

			this.box.append(this.fontSizeSelect, this.fontInput)
		}
		return this.box
	}

	showActions(mark) {
		this.box.style.display = "flex"
	}

	hideActions() {
		this.box.style.display = "none"
	}

	get toolboxIcon() {
		return `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1200 1200"><path fill="currentColor" d="M1041.282 793.277q-17.919-29.439-44.799-37.762c-37.166-11.894-78.649-11.087-103.68 16c-27.979 37.062-28.68 92.604 0 124.8c43.744 41.293 121.007 20.886 148.479-19.841zm98.559-331.515q60.158 55.039 60.159 156.158v389.114c-.653 10.752-9.477 19.059-19.199 19.199h-120.317c-10.753-.65-19.062-9.479-19.2-19.199v-11.521c-40.166 30.48-86.643 44.523-133.117 44.801c-52.74-1.544-98.588-20.205-134.398-53.119c-44.099-44.131-61.091-98.39-61.438-154.238c1.735-61.103 19.384-116.096 62.078-155.517c39.387-33.317 85.968-48.972 133.759-49.279q79.358 0 133.117 42.239v-37.12q0-88.318-92.158-88.318q-71.678 0-130.558 60.159c-10.422 9.223-25.115 5.606-30.72-5.12l-47.359-81.919q-6.4-12.8 3.84-23.039q43.52-43.52 101.118-65.919c95.159-33.016 222.167-31.196 294.393 32.638m-787.188-63.999l-84.479 302.075h170.237zm351.993 595.191q2.56 7.68 2.562 10.24c-.359 11.383-9.095 19.068-19.2 19.197H536.971q-14.08.002-17.92-14.079l-42.238-148.478H229.775l-42.239 148.478q-3.84 14.08-19.2 14.079H19.858c-15.959-1.327-21.994-11.124-19.199-24.317l250.876-824.308q5.12-14.08 19.2-14.08h165.119q14.078 0 19.198 14.08z"/></svg>`
	}

	static get CSS() {
		return styles["cdx-font-size"]
	}

	static get sanitize() {
		return {
			p: {
				class: FontSizeTool.CSS,
			},
		}
	}

	static get title() {
		return "字体大小"
	}
}

export default FontSizeTool

